<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><meta name="format-detection" content="telephone=no">
    <title>button</title>
    <link rel="stylesheet" href="../plugin/seedsui/seedsui.min.css">
</head>

<body>
    <section id="page_button" class="active">
        <header>
            <div class="titlebar">
                <a href="javascript:back()"><i class="icon icon-arrowleft"></i></a>
                <h1>按钮</h1>
            </div>
        </header>
        <article>
            <div class="title">普通按钮</div>
            <div class="card padding8" style="line-height: 50px;">
                <button class="radius4">按钮</button>
                <button class="radius4 submit">提交</button>
                <button class="radius4 cancel">取消</button>
                <button class="radius4 info">信息</button>
                <button class="radius4 success">完成</button>
                <button class="radius4 warn">提示或警告</button>
                <button class="radius4" disable>禁用</button>
                <button class="radius4 grayscale">去色按钮</button>
            </div>

            <div class="title">框形按钮</div>
            <div class="card padding8" style="line-height: 50px;">
                <button class="radius4 outline">按钮</button>
                <button class="radius4 submit outline">提交</button>
                <button class="radius4 cancel outline">取消</button>
                <button class="radius4 info outline">信息</button>
                <button class="radius4 success outline">完成</button>
                <button class="radius4 warn outline">提示警告</button>
                <button class="radius4 outline" disable>禁用</button>
                <button class="radius4 grayscale outline">去色按钮</button>
            </div>

            <div class="title">白色按钮</div>
            <div class="card padding8 bg-primary" style="line-height: 50px;">
                <button class="radius4 white">白色按钮</button>
                <button class="radius4 white outline">白色按钮</button>
            </div>

            <div class="title">图标按钮</div>
            <div class="card padding8">
                <button class="radius4">
                    <i class="icon icon-home"></i>
                    <label>按钮</label>
                </button>
                <button class="radius4 submit">
                    <i class="icon icon-rdohook"></i>
                    <label>提交</label>
                </button>
                <button class="radius4 cancel">
                    <i class="icon icon-rdoclose"></i>
                    <label>取消</label>
                </button>
                <button disable class="radius4">
                    <i class="icon icon-rdoclose"></i>
                    <label>禁用</label>
                </button>
            </div>

            <div class="title">图标框形按钮</div>
            <div class="card padding8">
                <button class="radius4 submit outline">
                    <i class="icon icon-rdohook"></i>
                    <label>提交</label>
                </button>
                <button disable class="outline">
                    <i class="icon icon-rdoclose"></i>
                    <label>禁用</label>
                </button>
                <button class="radius4 cancel outline">
                    <i class="icon icon-rdoclose"></i>
                    <label>取消</label>
                </button>
            </div>

            <div class="title">纯图标按钮</div>
            <div class="card padding8">
                <button class="round padding8">
                    <i class="icon icon-home"></i>
                </button>
                <button class="round submit padding8">
                    <i class="icon icon-rdohook"></i>
                </button>
                <button class="round cancel padding8">
                    <i class="icon icon-rdoclose"></i>
                </button>
                <button class="rect padding8">
                    <i class="icon icon-home"></i>
                </button>
                <button class="rect submit padding8">
                    <i class="icon icon-rdohook"></i>
                </button>
                <button class="rect cancel padding8">
                    <i class="icon icon-rdoclose"></i>
                </button>
            </div>

            <div class="title">3D按钮</div>
            <div class="card padding8">
                <button class="radius4 shadow">
                    <i class="icon icon-home"></i>
                    <label>按钮</label>
                </button>
                <button class="radius4 shadow">按钮</button>
                <button class="radius4 shadow">
                    <label>按钮</label>
                    <span class="tip">1</span>
                </button>
                <button class="round padding8 cancel shadow">
                    <i class="icon icon-rdoclose"></i>
                </button>
            </div>

            <div class="title">汽泡按钮</div>
            <div class="card padding8" style="line-height: 50px;">
                <button class="radius4">
                    <label>按钮</label>
                    <span class="tip">1</span>
                </button>
                <button class="radius4 submit">
                    <label>按钮</label>
                    <span class="tip">1</span>
                </button>
                <button class="radius4 cancel">
                    <label>按钮</label>
                    <span class="badge">1</span>
                </button>
                <button class="radius4 outline">
                    <label>按钮</label>
                    <span class="tip">1</span>
                </button>
                <button class="radius4 submit outline">
                    <label>按钮</label>
                    <span class="tip">1</span>
                </button>
                <button class="radius4 cancel outline">
                    <label>按钮</label>
                    <span class="badge">1</span>
                </button>
            </div>

            <div class="title">色彩标签</div>
            <div class="card margin8 padding8">
                <span class="mark-info">info</span>
                <span class="mark-success">success</span>
                <span class="mark-cancel">cancel</span>
                <span class="mark-warn">warn</span>
                <span class="mark-disable">disable</span>
                <span class="mark-grayscale">grayscale</span>
            </div>

            <div class="title">大按钮</div>
            <br/>
            <a class="radius4 button block margin8">按钮</a>
            <a class="radius4 button block submit margin8">
                <i class="icon icon-rdohook"></i>
                <label>提交</label>
            </a>
            <a class="radius4 button block cancel margin8">取消重置按钮</a>
            <a class="radius4 button block info margin8">信息按钮</a>
            <a class="radius4 button block outline margin8">
                <i class="icon icon-home"></i>
                <label>按钮</label>
            </a>
            <a class="radius4 button block submit outline margin8">
                <i class="icon icon-rdohook"></i>
                <label>提交</label>
            </a>
            <a class="radius4 button block cancel outline margin8">
                <i class="icon icon-rdoclose"></i>
                <label>取消重置按钮</label>
            </a>

            <div class="title">按钮组</div>
            <div class="button-group margin8">
                <span>
                    <input type="text" style="height:100%;line-height:100%;border:none;"/>
                </span>
                <span>搜索</span>
            </div>

            <div class="button-group margin8">
                <span class="disable">&laquo;</span>
                <span class="disable">&lt;</span>
                <span class="active">1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
                <span>&gt;</span>
                <span>&raquo;</span>
            </div>

            <!--分页-->
            <div class="margin8">
                <div class="button-group">
                    <span class="disable">上一页</span>
                </div>
                <div class="button-group">
                    <span class="active">1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                </div>
                <div class="button-group">...</div>
                <div class="button-group">
                    <span>下一页</span>
                </div>
            </div>
        </article>
    </section>
    <script src="../plugin/jquery/jquery.min.js"></script>
    <script src="../plugin/seedsui/seedsui.min.js"></script>
    <!--Exmobi能力-->
    <script src="../plugin/exmobi/exmobi.js"></script>
    <!--禁止ios弹性-->
    <script src="../plugin/inobounce/inobounce.min.js"></script>
    <script>
    //定义exmobi返回
    function back(){history.go(-1);}
</script>
</body>
</html>